<template>
    <Card title="基础数据">
        <div class="line">
            <template v-for="item in data" :key="item">
                <SmallCard :item="item" />
            </template>
        </div>
    </Card>
</template>

<script setup>
import Card from '../components/Card.vue';
import SmallCard from '../components/SmallCard.vue';

const data = [
    {
        type: '代理运营商',
        data: 12550,
        proportion: -200.32,
        dailyData: 200,
    },
    {
        type: '合作司机',
        data: 12550,
        proportion: 0,
        dailyData: 200,
    },
    {
        type: '合作运营商',
        data: 12550,
        dailyData: -200,
        proportion: 200.32,
    },
];

</script>

<style scoped lang="css">
.line {
    display: flex;
    .card:nth-child(2) {
        margin: 0 20px;
    }
}
.card {
    border-radius: 6px;
    border: 1px solid #e8e9eb;
    padding: 12px;
    min-width: 185px;
    box-sizing: border-box;
    .add {
        color: #f33e3e !important;
    }
    .normal {
        color: #2468f2 !important;
    }
    .lessen {
        color: #30bf13 !important;
    }
    .desc {
        height: 22px;
        font-size: 14px;
        font-weight: 400;
        color: #84868c;
        line-height: 22px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .card-body {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 8px;

        .card-title {
            display: flex;
            flex-direction: column;
            .card-data {
                height: 34px;
                font-size: 24px;
                font-weight: bold;
                color: #151b26;
                line-height: 34px;
            }
            .card-daily-data {
                margin-top: 8px;
                height: 22px;
                font-size: 14px;
                font-weight: 400;
                color: #84868c;
                line-height: 22px;
            }
        }
        .img-wrapper,
        .img {
            width: 55px;
            height: 45px;
            display: block;
        }
    }
}
</style>
